<style>
    .tab {border-radius: 2px 2px 2px 2px;border: solid 1px #adadad;width: 81%; background-color: rgba(197, 197, 197, 0.25);
        height: auto; padding: 10px;  margin-top: -4%; }
</style>
<div class="page" data-ng-controller="addPermission">
    <section class="panel panel-default">
        <div class="panel-heading"><strong><span
                class="glyphicon glyphicon-th"></span>&nbsp;&nbsp;&nbsp;&nbsp;创建权限</strong></div>
        <div class="panel-body">
            <div>
                <a onclick="appre();" id="apchoose1" class="btn btn-primary col-lg-2">创建权限</a><br/><br/>
                <a onclick="apnext();" id="apchoose2" class="btn btn-primary col-lg-2" disabled>设置菜单</a>
            </div>
            <form data-ng-submit="addPer()">
                <div id="apchange1" class="tab pull-right">
                    <div class="col-lg-8 form-horizontal form-validation">
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label>权限名称</label>
                            </div>
                            <div class="col-sm-9">
                                <input type="text"
                                       class="form-control"
                                       id="apname"
                                       placeholder="权限名称不为空"
                                       data-ng-model="permission.perName"
                                       required
                                       onkeyup="apsetNext()">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label>权限URL</label>
                            </div>
                            <div class="col-sm-9">
                                <input type="text"
                                       class="form-control"
                                       data-ng-model="permission.perUrl"
                                       >
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3">
                                <label>权限介绍</label>
                            </div>
                            <div class="col-sm-9">
                                <input type="text"
                                       class="form-control"
                                       data-ng-model="permission.perDesc"
                                        >
                            </div>
                        </div>
                    </div>
                </div>
                <div id="apchange2" class="tab pull-right" hidden="hidden">
                    <table class="table table-hover">
                        <tr class="mail-unread" data-ng-repeat="info in menu">
                            <td><label class="ui-checkbox"><input name="checkbox1" type="checkbox"
                                                                  value="{{info.id}}"><span></span></label></td>
                            <td>{{info.title}}</td>
                            <td>{{info.url}}</td>
                            <td>{{info.parentName}}</td>
                            <td>{{info.moduleName}}</td>
                        </tr>
                    </table>
                </div>
                <div style="clear: right;margin-top: 15px;" class="pull-right">
                    <a onclick="appre();" class="btn btn-primary">上一步</a>
                    <a id="apnext" style="margin-left: 10px;" onclick="apnext();apchangeNext();"
                       class="btn btn-primary">下一步</a>
                    <input type="submit" id="apfinish" value="完成" class="btn btn-primary"/>
                </div>
            </form>
        </div>
    </section>
</div>
<script>
    $(function () {
        $("#apnext").attr("disabled", true);$("#apfinish").hide();
        $("#apchoose1").css("background-color", "rgba(72, 205, 235, 0.45)");
    });
    function apsetNext() {
        if ($("#apname").val().trim().length > 0) {$("#apnext").attr("disabled", false);
        }else {$("#apnext").attr("disabled", true);}
    }function apchangeNext() {
        $("#apfinish").show();$("#apnext").hide();
    }function apnext() {
        $("#apchange1").hide();$("#apchange2").show();
        $("#apchoose2").attr("disabled", false);$("#apchoose2").css("background-color", "rgba(72, 205, 235, 0.45)");
        $("#apchoose1").css("background-color", "");apchangeNext();
    }function appre() {
        $("#apchange2").hide();$("#apchange1").show();
        $("#apchoose1").css("background-color", "rgba(72, 205, 235, 0.45)");$("#apchoose2").css("background-color", "");
        $("#apfinish").hide();$("#apnext").show();
    }
</script>